<html>
    <head>
        <title>JavaScript Api</title>
    </head>
    <body>
        <script>
            /*
                        七、 JavaScript Api：

                                        可能需要在客户端呈现和刷新小部件。

                                        在这种情况下，您可以使用ABP的WidgetManager并为您的小部件定义API。


                                    1、WidgetManager 小部件管理器

                                               WidgetManager用于"初始化" 和 "刷新" 一个或多个小部件。 
                                               
                                               创建一个新的WidgetManager如下所示：

                                                         $(function() {
                                                            var myWidgetManager = new abp.WidgetManager('#MyDashboardWidgetsArea');    
                                                         })   

                                                注：  
                                                      MyDashboardWidgetsArea（css选择器）可能包含一个或多个小部件。

                                                      在document. ready（如上）中使用WidgetManager是一种很好的做法，因为它的函数使用DOM并且需要DOM准备就绪。


                                                (1)、WidgetsManager.init() 方法

                                                            init简单地初始化WidgetManager并调用相关小部件的init方法（如果它们定义）（请参阅下面的Widget JavaScript API部分）

                                                                    myWidgetManager.init();

                                                (2)、WidgetsManager.refresh() 方法

                                                            refresh方法刷新与此WidgetManager相关的所有小部件：

                                                                    myWidgetManager.refresh();

                                                (3)、WidgetManager 的可设置的选项

                                                             WidgetManager有一些额外的选项。

                                                             ①、Filter Form 过滤表格

                                                                    如果您的小部件需要参数/过滤器，那么您通常会有一个表单来过滤小部件.

                                                                    在这种情况下，您可以创建一个包含一些表单元素的表单和一个包含一些小部件的仪表板区域。

                                                                                <form method="get" id="MyDashboardFilterForm">
                                                                                    ...form elements
                                                                                </form>

                                                                                <div id="MyDashboardWidgetsArea" data-widget-filter="#MyDashboardFilterForm">
                                                                                    ...widgets
                                                                                </div>

                                                                    data-widget-filter属性将表单与小部件相关联。

                                                                    每当提交表单时，所有小部件都会自动使用表单字段作为过滤器刷新。

                                                                    您可以使用WidgetManager构造函数的filterForm参数来代替data-widget-filter属性。
                                                                    
                                                                    例子：

                                                                            var myWidgetManager = new abp.WidgetManager({
                                                                                wrapper: '#MyDashboardWidgetsArea',
                                                                                filterForm: '#MyDashboardFilterForm'
                                                                            });

                                                             ②、过滤器回调

                                                                     您可能希望有一个更好的控件来在初始化和刷新小部件时提供过滤器。
                                                                     
                                                                     在这种情况下，您可以使用filterCallback选项：

                                                                             var myWidgetManager = new abp.WidgetManager({
                                                                                wrapper: '#MyDashboardWidgetsArea',
                                                                                filterCallback: function() {
                                                                                    return $('#MyDashboardFilterForm').serializeFormToObject();
                                                                                }
                                                                            }); 
                                                                            
                                                                     此示例显示了filterCallback的默认实现。您可以返回任何带有字段的JavaScript对象。
                                                                     
                                                                     eg：
                                                                                
                                                                                filterCallback: function() {
                                                                                    return {
                                                                                        'startDate': $('#StartDateInput').val(),
                                                                                        'endDate': $('#EndDateInput').val()
                                                                                    };
                                                                                }

                                                                    返回的过滤器被传递给init和refresh上的所有小部件。


                                        2、定义小部件 
                                
                                                    小部件可以定义一个JavaScript API，  该API在需要时由WidgetManager调用。

                                                    下面的代码示例可用于开始为小部件定义API。

                                                                (function () {
                                                                    abp.widgets.NewUserStatisticWidget = function ($wrapper) {  // NewUserStatisticWidget 是小部件名称

                                                                        var getFilters = function () {
                                                                            return {
                                                                                ...
                                                                            };
                                                                        }

                                                                        var refresh = function (filters) {
                                                                            ...
                                                                        };

                                                                        var init = function (filters) {
                                                                            ...
                                                                        };

                                                                        return {
                                                                            getFilters: getFilters,
                                                                            init: init,
                                                                            refresh: refresh
                                                                        };
                                                                    };
                                                                })();

                                                    NewUserStatisticWidget是这里小部件的名称。
                                                    
                                                    它应该与服务器端定义的小部件名称匹配。所有功能都是可选的。



                                                    (1)、getFilters

                                                            如果小部件具有内部自定义过滤器，则此函数应返回过滤器对象。
                                                            
                                                            eg：
                                                                    var getFilters = function() {
                                                                        return {
                                                                            frequency: $wrapper.find('.frequency-filter option:selected').val()
                                                                        };
                                                                    }

                                                                WidgetManager在构建过滤器时使用此方法。

                                                    (2)、init 方法

                                                            用于在需要时初始化小部件。 它有一个过滤器参数，可以在从服务器获取数据时使用。

                                                            init方法在调用WidgetManager.init()函数时使用。

                                                            如果您的小部件需要在刷新时完全重新加载，也会调用它。请参阅RefreshUrl小部件选项。



                                                    (3)、refresh 方法

                                                                用于在需要时刷新小部件。
                                                                
                                                                它有一个过滤器参数，可在从服务器获取数据时使用。
                                                                
                                                                每当调用WidgetManager.refresh()函数时，都会使用refresh方法。
                   */
        </script>
    </body>
</html>